<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker focus demo v2</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				$('.date-pick')
					.datePicker({createButton:false})
					.bind(
						'focus',
						function(event, message)
						{
							if (message == $.dpConst.DP_INTERNAL_FOCUS) {
								return true;
							}
							var dp = this;
							var $dp = $(this);
							$dp.dpDisplay();
							$('*').bind(
								'focus.datePicker',
								function(event)
								{
									var $focused = $(this);
									if (!$focused.is('.dp-applied')) // don't close the focused date picker if we just opened a new one!
									{
										// if the newly focused element isn't inside the date picker and isn't the original element which triggered
										// the opening of the date picker

										if ($focused.parents('#dp-popup').length == 0 && this != dp && !($.browser.msie && this == document.body)) {
											$('*').unbind('focus.datePicker');
											$dp.dpClose();
										}
									}
								}
							);
							return false;
						}
					).bind(
						'dpClosed',
						function(event, selected)
						{
							$('*').unbind('focus.datePicker');
						}
					);
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: datePicker which appears on focus - part 2.</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                This example shows how to try and make the date picker appear on focus of it's associated
				text field...
            </p>
			<p>
				This is better than <a href="datePickerOnFocus.html">part 1</a> because it now works in Firefox,
				Opera, Safari and even IE... I also added an extra select above the date pickers because it seems like Safari
				doesn't let you tab to links by default and this way there is something above the inputs for you to
				tab to...
			</p>
			<p>
				The problem with IE seems to be that whenever a focus event is triggered it happens twice - once with the jquery passed data
				and then again without... Hence the need to the IE check on line 898 of the date picker which means that after selecting a date
				in IE the tab order is messed up...
			</p>
			<form name="chooseDateForm" id="chooseDateForm" action="#">
				<fieldset>
					<legend>Test date picker form</legend>
                    <ol>
                        <li>
                            <label for="test-select">Test select:</label>
                            <select name="test-select" id="test-select" style="width: 170px">
                                <option value="1">Test SELECT </option>
                                <option value="2">Doesn't shine through</option>
                                <option value="3">Even in IE</option>
                                <option value="4">Yay!</option>
                            </select>
                        </li>
                        <li>
                            <label for="date1">Date 1:</label>
							<input name="date1" id="date1" class="date-pick" />
						</li>
                        <li>
                            <label for="date2">Date 2:</label>
							<input name="date2" id="date2" class="date-pick" />
						</li>
                        <li>
                            <label for="test-select2">Test select:</label>
                            <select name="test-select2" id="test-select2" style="width: 170px">
                                <option value="1">Test SELECT </option>
                                <option value="2">Doesn't shine through</option>
                                <option value="3">Even in IE</option>
                                <option value="4">Yay!</option>
                            </select>
                        </li>
					</ol>
				</fieldset>
			</form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">$(function()
{
	$('.date-pick')
		.datePicker({createButton:false})
		.bind(
			'focus',
			function(event, message)
			{
				if (message == $.dpConst.DP_INTERNAL_FOCUS) {
					return true;
				}
				var dp = this;
				var $dp = $(this);
				$dp.dpDisplay();
				$('*').bind(
					'focus.datePicker',
					function(event)
					{
						var $focused = $(this);
						if (!$focused.is('.dp-applied')) // don't close the focused date picker if we just opened a new one!
						{
							// if the newly focused element isn't inside the date picker and isn't the original element which triggered
							// the opening of the date picker

							if ($focused.parents('#dp-popup').length == 0 && this != dp && !($.browser.msie && this == document.body)) {
								$('*').unbind('focus.datePicker');
								$dp.dpClose();
							}
						}
					}
				);
				return false;
			}
		).bind(
			'dpClosed',
			function(event, selected)
			{
				$('*').unbind('focus.datePicker');
			}
		);
});</pre>
			<h2>Page CSS</h2>
			<pre class="sourcecode">
/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}</pre>
        </div>
	</body>
</html>